<template>
  <div class="tabX">
    <el-menu
      :default-active="activepage"
      class="el-menu-vertical-demo"
      background-color="#fff"
      text-color="#000"
      active-text-color="#75b9ff"
      router
    >
      <div class="itembg">
        <el-menu-item
          v-for="(item,index) in configs.menulist"
          :key="index"
          :name="index"
          :index="item.url"
        >{{item.menuName}}</el-menu-item>
      </div>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activepage: this.$route.path
    };
  },
  watch: {
    $route(newpath, old){
      this.activepage = newpath.path;
    }
  },
  methods: {},
  // created: {},
  props: {
    configs: {
      type: Object,
      default() {
        return {
          menulist: {
            menuName: "",
            url: ""
          }
        };
      }
    }
  }
};
</script>

<style lang="less" scoped>
.tabX {
  top: 0;
  bottom: 0;
  display: -webkit-flex;
  height: 100%;
  .el-menu {
    width: 100%;
    border-right: none;
    .itembg {
      border-right: 3px solid #e4e7ed;
      height: 100%;
      position: absolute;
      display: flex;
      flex-direction: column;
      width: 100%;
      top: 0;
      bottom: 0px;
      .el-menu-item {
        border-right: 3px solid #e4e7ed;
        height: 50px !important;
        margin-right: -3px;
      }
      .el-menu-item:hover {
        outline: 0 !important;
        color: #409eff !important;
        background-color: #fff !important;
      }
      .el-menu-item.is-active {
        color: #75b9ff !important;
        border-right: 3px solid #409eff;
      }
    }
  }
}
</style>